<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"
    >
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Свободный чат для любителей свободного общения.(beta)</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<LINK rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="/s/jquery.jscrollpane.css" type="text/css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="/j/jquery.jscrollpane.min.js"></script>
<script src="/j/jquery.mousewheel.min.js"></script>
<script src="/j/jquery.json-2.2.min.js"></script>
<script src="/j/jquery.caret.min.js"></script>
<script src="/j/jquery.cookie.js"></script>
<script src="/j/mc.js"></script>
<script src="/j/smiles.js"></script>
<script src="/j/tran.js"></script>
<script>
$(function(){
	if(!window.mc){
		top.location.reload();
		return;
	}
	$("#reg").submit(function(){
		$("#err").html("");
		var l = $(this).children('[name="login"]').val();
		var p = $(this).children('[name="pass"]').val();
		$.ajax({
			type: "POST",
			url: "/reg.pl",
			success: function(data){
				if(data.error){
					$("#err").html("Ошибка: "+ data.text);
				}else{
					start(l,p);
				}
			},
			error: function(jqXHR, textStatus, errorThrown){
					$("#err").html("Ошибка: "+ textStatus + " ( " + errorThrown + " )");
				},
			data: {
				login: l,
				pass: p
			}
		});
		return false;
	});
	$("#log").submit(function(){
		try{
		var l = $(this).children('[name="login"]').val();
		var p = $(this).children('[name="pass"]').val();
		if(l != "" && p != ""){
			if($(this).children('[name="keep"]').attr("checked")){
				$.cookie("keep",1);
			}
			start(l,p);
		}else{
			$("#err").html("Нужно логин и пароль");
		}
		}catch(e){
			alert("err: "+e);
		}
		return false;
	});
	if(mc.smiles){
		$("#smp").click(smclk).html(mc.smiles.panel);
		$("#smpi").html("<img class=sm src=\"/i/mini/smile.gif\">");
		$("#smpi img").click(function(){
			var i = $(this).offset();
			var o = $("#smp");
			o.show();
			i.left -= o.width();
			i.top -= o.height();
			o.offset(i);
			return false;
		});
	}
	$("#timer").delay(1000).queue(show_timer);

	$("#tran_l").click(mc.translate(false));
	$("#tran_c").click(mc.translate(true));
	var rl = $.cookie("reload");
	if(rl){
		rl = $.evalJSON(rl);
		var l = rl.l;
		var p = rl.p;

		if(l != "" && p != ""){
			if(!$.cookie("keep")){
				$.cookie("reload",null);
			}
			start(l,p);
		}
	}
});
function smclk(e){
	var t = $(e.target);
	if(t.is("img") && t.hasClass("sm")){
		var f = t.attr("src").match(/\/(\w+)\.gif/);
		if(f){
			mc.txt.val(mc.txt.focus().caret().replace(":" + f[1] + ":"));
		}
		$("#smp").hide();
	}
	return false;
}
function show_timer(){
	$("#timer").delay(1000).queue(show_timer).dequeue();
	var now = new Date();
	var t = now.toLocaleTimeString().match(/(\d+:\d+:\d+)/);
	$("#timer").html(t[1]);
}
function start(l,p){
	$("#login").hide();
	$("#chat").show();
	$("#message").jScrollPane({showArrows: true});
	mc.init("/ch/","message","inputer","topic");
	mc.start(l,p,"main");
	$(window).resize(onres);
	onres();
}
function onres(){
	var o = $("#message");
	var f = $("#frm2");
	var t = $("#topic2");
	o.height($(window).height() - (f.height() + t.height() + 8 ));
	if(o.data().jsp){
		o.data().jsp.reinitialise();
	}
}
function mkScroll(id){
	var o = $(id);
	var jsp = o.data().jsp;
	if(jsp){
		jsp.destroy();
	}
	o.jScrollPane({showArrows: true});
}

</script>
<style>
body {
	margin: 0;
	padding: 0;
	overflow: hidden;
}
#chat{
	display: none;
}
#login{
}
#message {
	height: 10em;
	/*border: 1px solid black;*/
	/*overflow-x: hidden;*/
	/*overflow-y: scroll;*/
	width: 100%;
	color: black;
}
#frm {
	background-color: #ccc;
	overflow: hidden;
	margin: 0.1em;
}
#inputer {
	margin: 0.2em;
}
#topic {
	margin: 0.2em;
}
div.msg {
	font: 0.9em Arial;
	margin-left: 0.2em;
}
div.com {
}
div.self {
	background-color: #ffffee;
}
div.to {
	font-weight: bold;
}
div.inn {
	font-style: italic;
}
span.time {
	color: grey;
	font-weight: normal;
}
span.login {
	cursor: pointer;
    font-weight: bold;
}
img.sm {
	cursor: pointer;
	vertical-align: bottom;
}
span.comm {
	color: blue;
}
span.priv {
	color: red;
}
div.ff{
	float: left;
	/*border: 0.1em outset #aaa;*/
	/*padding: 0.2em;*/
	margin: 0.1em;
	background-color: white;
	/*height: 40px;*/
	overflow: hidden;
	height: 20px;
	vertical-align: middle;
}
fieldset.ff{
	float: left;
	border: 0.1em outset #aaa;
	padding: 0.2em;
	margin: 0.3em;
	background-color: white;
	/*height: 40px;*/
	overflow: hidden;
	white-space: nowrap;
}
div#smp {
	display: none;
	position: absolute;
	width: 10em;
	background-color: white;
}
img#tran_c,
img#tran_l {
	cursor: pointer;
}
div.err {
	width: 100%;
}
div.msg a {
	color: black;
	font-weight: bold;
	text-decoration: none;
}
</style>
</head>
<body>
<div id="login">
	<div id="err"></div>
	<fieldset class="ff">
		<legend>Регистрация</legend>
		<form id="reg">
			<label for="rl">Логин:</label>
			<input id=rl type=text name="login">
			
			<br><label for="rp">Пароль:</label>
			<input id=rp type=text name="pass">
			
			<br><input type=submit value="Регистрировать">
		</form>
	</fieldset>
	<fieldset class="ff">
		<legend>Вход</legend>
		<form id="log">
			<label for="ll">Логин:</label>
			<input id=ll type=text name="login">
			
			<br><label for="lp">Пароль:</label>
			<input id=lp type=password name="pass">
			
			<br><input id=ls type=checkbox name="keep" value="on">
			<label for="ls">Входить автоматически</label>
			
			<br><input type=submit value="Войти">
		</form>
	</fieldset>
</div>
<div id="chat">
	<div id="message"></div>
	<div id="frm2">
		<div id="frm">
			<form id="inputer">
				<div class=ff id=timer>00:00:00</div>
				<div class=ff><input type="text" name="txt" size=60></div>
				<div class=ff><input type=image src="/i/en.png"></div>
				<div class=ff id="smpi"></div>
				<div class=ff><img id="tran_l" src="/i/r2l.png"/></div>
				<div class=ff><img id="tran_c" src="/i/l2r.png"/></div>
				<div id="smp"></div>
			</form>
		</div>
	</div>
	<div id="topic2">
		<div id="topic">topic</div>
	</div>
</div>
</body>
</html>
